<html>
	<head>
		<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap-responsive.css" />
		<script type="text/javascript" src="{{STATIC_URL}}js/jquery.min.js" ></script>
		<script type="text/javascript" src="{{STATIC_URL}}js/bootstrap.js" ></script>

		<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/auth-buttons.css" />
		<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}img/auth-icons.css" />
	</head>

	<body>

		<div class="navbar navbar-fixed-top">
	        <div class="navbar-inner">
		        <div class="container">
		          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		            </a>
		          <a class="brand" href="{% url index %}">Miniupload</a>

			        <div class="nav-collapse collapse" style="height: 0px;">
			            <ul class="nav">
			        	    <li class="active"><a href="{% url index %}">Inicio</a>
			            	<li><a href="{% url send %}">Enviar</a></li>
			            	<li><a href="{% url receive %}">Descargar</a></li>
			            	<li><a href="{% url howto %}">Tutorial</a></li>
			            	<li><a href="{% url logout %}">Cerrar Sesión</a></li>
			            </ul>
			        </div><!--/.nav-collapse -->
	        	</div>
       		</div>
  		</div>
<br></br>
		<div class="container">
			<div class="hero-unit">
     				
				<div id="contenido">
				{% block contenido %}{% endblock %}
				</div>
			</div>
		</div>	

	<div class="container">
	<div class="hero-unit">
	 <div class="row">
	 		<p><h2><span style="color:#80BFFF"> La aplicación...</span></h2></p>
	 		<p><h4>Aquí puedes ver cómo funciona todo en unas pocas imágenes:</span></h4></p>
			<div id="myCarousel" class="carousel slide">

		            <div class="carousel-inner">
		              <div class="item">
		                <img src="{{STATIC_URL}}img/sing_in.jpg" alt="Inicia sesión con twitter">
		                <div class="carousel-caption">
		                  <h4>Inicia sesión con Twitter</h4>
		                  <h5>Para utilizar miniupload no necesitarás crear una cuenta, basta con que inicies sesión con twitter y podrás empezar a enviar archivos.</h5>
		                </div>
		              </div>

		              <div class="item active">
		                <img src="{{STATIC_URL}}img/auth.jpg" alt="Autoriza la aplicación.">
		                <div class="carousel-caption">
		                  <h4>Autoriza a miniupload.</h4>
		                  <h5>No vamos a recopilar información sobre ti,pero necesitamos que nos des permiso para enviar una notificación al usuario al que le quieras enviar un archivo.</h5>
		                </div>
		              </div>

		              <div class="item">
		                <img src="{{STATIC_URL}}img/login_inicio.jpg" alt="Observa las opciones disponibles">
		                <div class="carousel-caption">
		                  <h4>Una vez iniciada la sesión puedes enviar mensajes.</h4>
		                  <h5>¡Ya tienes todas las opciones disponibles! Envía archivos o mira si te han enviado algo.</h5>
		                </div>
		              </div>

		              <div class="item">
		                <img src="{{STATIC_URL}}img/enviar.jpg" alt="Envía archivos">
		                <div class="carousel-caption">
		                  <h4>Envía mensajes</h4>
		                  <h5>Sólo tienes que escribir el nombre que utiliza la persona a la que quieres enviar algo en twitter (sin añadir @), adjuntar el archivo y estará listo para enviar.</h5>
		                </div>
		              </div>

		              <div class="item">
		                <img src="{{STATIC_URL}}img/rec_twitter.jpg" alt="Recibe archivos">
		                <div class="carousel-caption">
		                  <h4>Mensaje recibido</h4>
		                  <h5>Cuando recibas un mensaje te lo notificaremos en twitter.</h5>
		                </div>
		              </div>

		              <div class="item">
		                 <img src="{{STATIC_URL}}img/descargas.jpg" alt="Descarga los archivos.">
		                <div class="carousel-caption">
		                  <h4>Descarga los archivos</h4>
		                  <h5>Cuando quieras descargar un archivo, en la sección "Descarga", podrás elegir entre los archivos que hayas recibido.</h5>
		                </div>
		              </div>

		              <div class="item">
		               <img src="{{STATIC_URL}}img/tutorial.jpg" alt="tutorial">
		                <div class="carousel-caption">
		                  <h4>Tutorial</h4>
		                  <h5>Hemos preparado un pequeño tutorial para ti.</h5>
		                </div>
		              </div>


		            </div>
		            <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
		            <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
		    </div>
		
	</div>
	</div>
	</div>

 <br>
	
	</body>	
</html>
